<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>地图柱状图变形动画</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    </head>
    <body>
        <div id="container" style="width: 100%; height: 800px"></div>
        <script>
            var chartDom = document.getElementById("container");
            var myChart = echarts.init(chartDom, null, {
                renderer: "canvas",
                useDirtyRect: false,
            });
            var option;

            // 定义颜色数组
            const colors = [
                "#5470c6",
                "#91cc75",
                "#fac858",
                "#ee6666",
                "#73c0de",
                "#3ba272",
                "#fc8452",
                "#9a60b4",
                "#ea7ccc",
                "#B22222",
                "#DAA520",
                "#4B0082",
                "#008080",
                "#800000",
                "#00CED1",
                "#FF69B4",
                "#4682B4",
                "#DEB887",
                "#9370DB",
                "#008B8B",
                "#FF8C00",
                "#32CD32",
                "#8B008B",
                "#483D8B",
                "#2F4F4F",
                "#FF1493",
                "#00FA9A",
                "#8A2BE2",
                "#A0522D",
                "#778899",
                "#006400",
            ];

            // 显示加载动画
            myChart.showLoading();

            // 先加载中国地图数据
            fetch(
                "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
            )
                .then((response) => response.json())
                .then((geoJson) => {
                    // 隐藏加载动画
                    myChart.hideLoading();

                    echarts.registerMap("china", geoJson);

                    const data = [
                        { name: "广东省", value: 89562 },
                        { name: "江苏省", value: 78935 },
                        { name: "浙江省", value: 76421 },
                        { name: "山东省", value: 72845 },
                        { name: "福建省", value: 68723 },
                        { name: "河南省", value: 45632 },
                        { name: "四川省", value: 43256 },
                        { name: "湖北省", value: 41897 },
                        { name: "河北省", value: 52634 },
                        { name: "湖南省", value: 39845 },
                        { name: "安徽省", value: 38965 },
                        { name: "辽宁省", value: 58742 },
                        { name: "陕西省", value: 35621 },
                        { name: "江西省", value: 34567 },
                        { name: "云南省", value: 32456 },
                        { name: "广西壮族自治区", value: 48932 },
                        { name: "山西省", value: 31245 },
                        { name: "内蒙古自治区", value: 29876 },
                        { name: "贵州省", value: 28543 },
                        { name: "黑龙江省", value: 33654 },
                        { name: "吉林省", value: 30987 },
                        { name: "天津市", value: 45678 },
                        { name: "上海市", value: 82345 },
                        { name: "重庆市", value: 38765 },
                        { name: "海南省", value: 42345 },
                        { name: "甘肃省", value: 25678 },
                        { name: "青海省", value: 23456 },
                        { name: "宁夏回族自治区", value: 21345 },
                        { name: "新疆维吾尔自治区", value: 27654 },
                        { name: "西藏自治区", value: 19876 },
                        { name: "北京市", value: 76543 },
                    ].sort((a, b) => a.value - b.value);

                    // 为每个数据项添加颜色
                    data.forEach((item, index) => {
                        item.itemStyle = {
                            color: colors[index],
                        };
                    });

                    // 预处理数据
                    const names = data.map((item) => item.name);
                    const values = data.map((item) => ({
                        value: item.value,
                        itemStyle: item.itemStyle,
                    }));

                    const baseOption = {
                        title: {
                            text: "各省份销售额统计",
                            subtext: "自动切换视图",
                            left: "center",
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{b}: {c}元",
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                myTool1: {
                                    show: true,
                                    title: "切换视图",
                                    icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                                    onclick: function () {
                                        currentOption =
                                            currentOption === mapOption
                                                ? barOption
                                                : mapOption;
                                        myChart.setOption(currentOption, true);
                                    },
                                },
                            },
                        },
                        animation: true,
                        animationDuration: 1500,
                        animationEasing: "cubicInOut",
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: "cubicInOut",
                    };

                    const mapOption = {
                        ...baseOption,
                        series: [
                            {
                                id: "sales",
                                name: "销售额",
                                type: "map",
                                map: "china",
                                roam: true,
                                emphasis: {
                                    label: {
                                        show: true,
                                    },
                                },
                                data: data,
                                universalTransition: {
                                    enabled: true,
                                    delay: function (idx) {
                                        return Math.random() * 400;
                                    },
                                },
                            },
                        ],
                    };

                    const barOption = {
                        ...baseOption,
                        tooltip: {
                            trigger: "axis",
                            formatter: "{b}: {c}元",
                        },
                        grid: {
                            top: 80,
                            bottom: 90,
                            left: 90,
                            right: 40,
                        },
                        xAxis: {
                            type: "value",
                            name: "销售额（元）",
                        },
                        yAxis: {
                            type: "category",
                            axisLabel: {
                                interval: 0,
                                rotate: 30,
                            },
                            data: names,
                        },
                        series: [
                            {
                                id: "sales",
                                type: "bar",
                                data: values,
                                universalTransition: {
                                    enabled: true,
                                    delay: function (idx) {
                                        return Math.random() * 400;
                                    },
                                },
                            },
                        ],
                    };

                    let currentOption = mapOption;
                    myChart.setOption(currentOption);

                    // 添加自动切换效果
                    setInterval(function () {
                        currentOption =
                            currentOption === mapOption ? barOption : mapOption;
                        myChart.setOption(currentOption, true);
                    }, 4000);
                });

            window.addEventListener("resize", function () {
                myChart.resize();
            });
        </script>
    </body>
</html>
